<h1 class="crayons-title mb-3">Billboards</h1>

<div
  data-controller="confirmation-modal"
  data-confirmation-modal-root-selector-value="#confirmation-modal-root"
  data-confirmation-modal-content-selector-value="#confirmation-modal"
  data-confirmation-modal-title-value="Confirm changes"
  data-confirmation-modal-size-value="m">
  <nav class="flex mb-4" aria-label="Billboards navigation">
    <%= form_tag(admin_billboards_path, method: "get") do %>
     <%= text_field_tag(:search, params[:search], aria: { label: "Search" }, class: "crayons-header--search-input crayons-textfield", placeholder: "Search", autocomplete: "off") %>
    <% end %>
    <div class="ml-auto flex gap-2">
      <%= link_to "Placement Area Configs", admin_billboard_placement_area_configs_path, class: "crayons-btn crayons-btn--secondary" %>
      <%= link_to "Make A New Billboard", new_admin_billboard_path, class: "crayons-btn" %>
    </div>
  </nav>

  <%= paginate @billboards %>

  <table class="crayons-table" width="100%">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Placement Area</th>
        <th scope="col">Display to User Group</th>
        <th scope="col">Type</th>
        <th scope="col">Public?</th>
        <th scope="col">Success Rate</th>
      </tr>
    </thead>
    <tbody class="crayons-card">
      <% @billboards.each do |billboard| %>
          <tr data-row-id="<%= billboard.id %>">
            <td><%= link_to billboard.name, edit_admin_billboard_path(billboard) %></td>
            <td><%= billboard.human_readable_placement_area %></td>
            <td><%= billboard.display_to %></td>
            <td><%= billboard.type_of.titleize %></td>
            <% if billboard.published? && billboard.approved? %>
              <td><span class="crayons-icon" role="img" aria-label="Ad is published and approved">✅</span></td>
            <% else %>
              <td><span class="crayons-icon" role="img" aria-label="Ad is not published or approved">❌</span></td>
            <% end %>
            <td><%= billboard.success_rate %></td>
            <td><%= link_to "Details", admin_billboard_path(billboard), class: "crayons-btn" %></td>
            <td><%= link_to "Edit", edit_admin_billboard_path(billboard), class: "crayons-btn crayons-btn--secondary" %></td>
            <td>
              <button
                class="crayons-btn crayons-btn--danger"
                data-item-id="<%= billboard.id %>"
                data-endpoint="/admin/customization/billboards"
                data-username="<%= current_user.username %>"
                data-action="click->confirmation-modal#openModal">Destroy</button>
            </td>
          </tr>
      <% end %>
    </tbody>
  </table>
  <%= render partial: "admin/shared/destroy_confirmation_modal" %>
  <%= paginate @billboards %>
</div>
